{% extends 'base.html' %}
{% block title %}
    {{ html_title }}
{% endblock title %}

{% block head %}
    {# 加载sidebar的CSS #}
    {% load static %}
    <link rel="stylesheet" href="{% static "css/sidebar.css"%}">
    <link rel="stylesheet" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css">
{% endblock head %}

{% block js %}
    {# Datatables的JS #}
    <script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
{% endblock js %}

{% block body %}
<div class="row" id="body-row">
    <div class="col-sm-3 col-md-2 sidebar">
          <ul class="sidebar-nav">
              {% for sidebar in sidebar_list %}
                  {# 判断当前Rack是不是Active Rack,如果是CSS会调整颜色 #}
                  {% if sidebar.0 == active_sidebar %}
                    <li class="active">
                        <a href="{{ sidebar.1 }}">{{ sidebar.0 }}</a>
                    </li>
                  {% else %}
                      <li><a href="{{ sidebar.1 }}">{{ sidebar.0 }}</a></li>
                  {% endif %}
              {% endfor %}
          </ul>
    </div>
    <div class="col-sm-8 col-md-9 main">
        <br><h2 style="color: #666666">查看设备类型</h2>
        {% if successmessage %}
            <span class="message"><div class="alert alert-success" role="alert">{{ successmessage }}</div></span>
        {% endif %}

        {% if warningmessage %}
            <span class="message"><div class="alert alert-warning" role="alert">{{ warningmessage}}</div></span>
        {% endif %}

        {% if errormessage %}
            <span class="message"><div class="alert alert-danger" role="alert">{{ errormessage }}</div></span>
        {% endif %}
<table class="table table-bordered" id="table-for-device-type">
                <thead class="thead-dark">
                    <tr>
                      <th class="text-center">编号</th>
                      <th class="text-center">设备类型</th>
                      <th class="text-center">操作</th>
                    </tr>
                </thead>
                <tbody class="text-center">

                {% for device_type in device_type_list %}
                    <tr>
                        <td>{{ forloop.counter }}</td>
                        <td>{{ device_type.name }}</td>
                        <td align="center" valign="center"><a href="{{ device_type.id_delete }}" onclick="return confirmAct();" data-toggle="tooltip" data-placement="top" title="删除此设备类型" class="badge badge-danger">删除</a>
                          <a href="{{ device_type.id_edit }}"  data-toggle="tooltip" data-placement="top" title="编辑此设备类型" class="badge badge-success">编辑</a>
                        </td>
                    </tr>
                {% endfor %}
                </tbody>
            </table>
    </div>
</div>
{# DataTable渲染整个表 #}
<script>
    $(document).ready( function () {
        $('#table-for-device-type').DataTable({
            'iDisplayLength': 100 // 默认显示行数
            });
    } );
</script>
{# DataTable中点击任何一个条目变深色,表示被选中功能的JavaScript #}
<script>
    $(document).ready(function() {
        var table = $('#table-for-student').DataTable();

        $('#table-for-student tbody').on( 'click', 'tr', function () {
            if ( $(this).hasClass('selected') ) {
                $(this).removeClass('selected');
            }
            else {
                table.$('tr.selected').removeClass('selected');
                $(this).addClass('selected');
            }
        } );

        $('#button').click( function () {
            table.row('.selected').remove().draw( false );
        } );
    } );
</script>

{# 提示删除确认警告的JavaScript #}
<script type="text/javascript" language="javascript">
    <!--
    function confirmAct()
    {
        if(confirm('确定要执行此删除操作吗?'))
        {
            return true;
        }
        return false;
    }
    //-->
</script>
{% endblock body %}
